const storageKey = 'add-tips';

Component({
  options: {
    addGlobalClass: true
  },

  properties: {
    custom: {
      type: Boolean,
      value: false
    },
    color: {
      type: String,
      value: '#fff'
    },
    textColor: {
      type: String,
      value: '#4D4D4D'
    },
    text: {
      type: String,
      value: '「添加到我的小程序」使用更方便哦'
    },
    duration: {
      type: Number,
      value: 10
    },
    delay: {
      type: Number,
      value: 2
    }
  },

  data: {
    showTips: false
  },

  lifetimes: {
    attached: function () {
      if (wx.getStorageSync(storageKey)) return;
      let rect = wx.getMenuButtonBoundingClientRect() ? wx.getMenuButtonBoundingClientRect() : null;
      let { screenWidth } = wx.getSystemInfoSync();
      this.setData({
        navbarHeight: rect.bottom,
        arrowRight: screenWidth - rect.right + rect.width * 3 / 4 - 5,
        bodyRight: screenWidth - rect.right
      });
      this.startTimer = setTimeout(() => {
        this.setData({ showTips: true });
      }, this.data.delay * 1000)
      this.duraTimer = setTimeout(() => {
        this.shrink();
      }, (this.data.duration + this.data.delay) * 1000)
    },
    detached: function () {
      if (this.startTimer) clearTimeout(this.startTimer);
      if (this.duraTimer) clearTimeout(this.duraTimer);
    },
  },
  methods: {
    hidden: function () {
      this.setData({ showTips: false });
      wx.setStorageSync(storageKey, true);
      this.shrink();
    },
    shrink: function () {
      this.animate('#add-tips', [
        { scale: [1, 1] },
        { scale: [0, 0], ease: 'ease', transformOrigin: `calc(600rpx - ${this.data.arrowR}px) 1%` }
      ], 500, function () {
        this.setData({ showTips: false });
      }.bind(this));
    }
  }
})
